<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>毛玻璃滤镜效果</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        width: 400px;
        height:200px;
        background:url(./img/demo8-0.jpg);
        margin:0 auto 10px;
        position: relative;
    }
    .box>div{
        background: hsla(0, 0%, 100%, 0.3);
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        overflow: hidden;
    }
    .box>.box1{
        background: hsla(0, 0%, 100%, 0.5);
    }
    .box>.box2::before{
        background: url(./img/demo8-0.jpg);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        filter: blur(10px);
        z-index: -1;  /*使before的内容居于.box2的下面*/
        margin: -30px; /*滤镜边缘会逐渐消退，使滤镜的范围加大，再配合父级的overflow: hidden;*/
    }
</style>

<body>
    <!-- 提升背景透明度，使文字清晰可看 -->
    <div class="box">
        <div class="box1">
            <p>hahah</p>
            <p>hahahahah</p>
            <p>hahahahahah</p>
            <p>hahah</p>
            <p>hahahahah</p>
            <p>hahahahahah</p>
        </div>
    </div>
    <!-- 加滤镜，使文字清晰可看 -->
    <div class="box">
        <div class="box2">
            <p>hahah</p>
            <p>hahahahah</p>
            <p>hahahahahah</p>
            <p>hahah</p>
            <p>hahahahah</p>
            <p>hahahahahah</p>
        </div>
    </div>
</body>
<script type="text/javascript">
</script>

</html>